<!-- eslint-disable -->
<template>
  <div class="page-main">
    <el-row class="list-search">
      <div class="content-search">
        <el-form :inline="true" :model="data" @submit.native.prevent>
          <el-form-item label="用户">
            <el-input v-model="data.user_id" type="text" size="small" placeholder="请输入用户" clearable></el-input>
          </el-form-item>
          <el-form-item label="分类">
            <el-select v-model="data.category_id" size="small" placeholder="请选择分类" clearable>
              <el-option
                    v-for="item in categoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="data.name" type="text" size="small" placeholder="请输入商品名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="热门推荐">
            <el-select v-model="data.is_rec" size="small" placeholder="请选择热门推荐" clearable>
              <el-option
                    v-for="item in [
                      { value: '-1', label: '全部' },
                      { value: '1', label: '推荐' },
                      { value: '0', label: '不推荐' },
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="data.type" size="small" placeholder="请选择类型" clearable>
              <el-option
                    v-for="item in [
                      { value: '-1', label: '所有商品' },
                      { value: '1', label: '实物商品' },
                      { value: '2', label: '预约服务商品' },
                    ]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="search">搜 索</el-button>
            <el-button size="small" @click="searchReset">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="separate-search"></div>
    </el-row>

    <el-row class="list-header">
      <div class="header-div">
        <div class="list-title">商品列表</div>
        <div class="div-header-btn">
          <el-button type="primary" size="small" @click="editTmp()">新 增</el-button>
        </div>
      </div>
    </el-row>

    <el-row>
      <el-table :data="dataList" v-loading="loading" size="medium" border
        :cell-style="{ padding: '8px 0' }"
        :header-cell-style="{ fontWeight: 'bold', color: '#333', backgroundColor: '#FAFAFA' }">
        <el-table-column prop="user_id" label="发布人" min-width="100">
            <template slot-scope="scope">
                <div v-if="scope.row.user_id == 0">平台</div>
                <div v-else>{{scope.row.user_id}}</div>
            </template>
        </el-table-column>
        <el-table-column prop="cover" label="商品信息" min-width="100">
          <template slot-scope="scope" v-if="scope.row.cover">
            <div style="display: flex;">
                <div style="width: 60px;">
                    <el-popover
                      placement="right"
                      width="220"
                      trigger="click">
                      <el-image
                        fit="contain"
                        style="width: 200px; height: 200px"
                        :src="scope.row.cover">
                      </el-image>
                      <el-image
                        slot="reference"
                        fit="contain"
                        style="width: 50px; height: 50px; cursor: pointer;"
                        :src="scope.row.cover">
                      </el-image>
                    </el-popover>
                </div>
                <div style="flex: 1;">
                    <div>{{scope.row.category_name}}</div>
                    <div>{{scope.row.name}}</div>
                </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" min-width="100"></el-table-column>
        <el-table-column prop="stock_num" label="库存销售信息" min-width="100">
            <template slot-scope="scope">
              <div>
                  <div><span>库存：</span>{{scope.row.stock_num}}</div>
                  <div><span>销量：</span>{{scope.row.sale_num}}</div>
              </div>
            </template>
        </el-table-column>
        <el-table-column prop="stock_num" label="动态信息" min-width="100">
            <template slot-scope="scope">
              <div>
                  <div><span>收藏数：</span>{{scope.row.collect_num}}</div>
                  <div><span>好评数：</span>{{scope.row.praise_num}}</div>
                  <div><span>评分：</span>{{scope.row.score}}</div>
                  <div><span>浏览数：</span>{{scope.row.view_num}}</div>
              </div>
            </template>
        </el-table-column>
        <el-table-column prop="desc" label="商品介绍" min-width="100"></el-table-column>
        <el-table-column prop="is_rec" label="热门推荐" min-width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.is_rec == 1" type="danger">热门推荐</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" min-width="100">
          <template slot-scope="scope">
              <el-tag v-if="scope.row.type == 1">实物商品</el-tag>
              <el-tag v-if="scope.row.type == 2" type="success">预约服务商品</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="审核" min-width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 0" type="danger">待审核</el-tag>
            <el-tag v-if="scope.row.status == 1" type="">已审核</el-tag>
            <el-tag v-if="scope.row.status == 2" type="info">审核失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="service_am" label="服务时间" min-width="100"></el-table-column>
        <el-table-column prop="created_at" label="创建时间" min-width="100"></el-table-column>
        <el-table-column label="操作" min-width="170">
          <template slot-scope="scope">
            <el-button v-if="scope.row.is_rec == 0" @click="setRec(scope.row.id, 1)" type="text" size="mini">推荐</el-button>
            <el-button v-else @click="setRec(scope.row.id, 0)" type="text" size="mini">取消推荐</el-button>
            <el-divider direction="vertical"></el-divider>

            <span v-if="scope.row.status == 0">
                <el-button @click="setStstus(scope.row.id, 1)" type="text" size="mini">审核通过</el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button @click="setStstus(scope.row.id, 2)" type="text" size="mini">审核不通过</el-button>
                <el-divider direction="vertical"></el-divider>
            </span>
            <el-button @click="editTmp(scope.row)" type="text" size="mini">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-popconfirm
              @confirm="del(scope.row.id)"
              icon="el-icon-warning"
              placement="top"
              title="是否要删除此行？">
              <el-button size="mini" type="text" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-row class="pagination pagination-news">
      <div class="pagination-div">
        <div class="total-con">
          <div class="pagination-total">共 <em> {{totalCount}} </em> 条记录</div>
        </div>
        <el-pagination
          @current-change="changePage"
          @size-change="changePageSize"
          background
          :layout="pageLayout"
          :page-sizes="pagePageSizes"
          :page-size="pagePageSize"
          :total="totalCount"
          :current-page.sync="current_page"
          :hide-on-single-page="false">
        </el-pagination>
      </div>
    </el-row>

    <goodsForm @refreshPage="refreshPage" ref="refGoodsForm"></goodsForm>
  </div>
</template>

<!-- eslint-disable -->
<script>
  import {GoodsIndex, GoodsDel, GoodsStatus, GoodsRec, GoodsParams} from '@/utils/request.js'
  import goodsForm from './goods-form'
  import '@/assets/css/news.css';

  export default {
    components: { goodsForm },
    data(){
      return {
        data: {
          page: 1,
          page_size: this.pagePageSize,
          is_rec: -1,
          type: -1
        },
        dataList: [],
        loading: false,
        totalCount: 0,
        current_page: 1,
        categoryList: []
      }
    },
    activated() {
      this.data.page = 1
      this.current_page = 1
      this.getParams()
      this.getList()
    },
    methods: {
      changePage(page) {
        this.data.page = page
        this.getList()
      },
      changePageSize(size) {
        this.data.page_size = size
        this.data.page = 1
        this.current_page = 1
        this.getList()
      },
      refreshPage() {
        this.data.page--
        this.getList()
      },
      getList() {
        this.loading = true
        GoodsIndex(this.data).then((res) => {
          if (res.code == 0) {
            this.data.page++
            this.dataList = res.data.data
            this.totalCount = res.data.count
          } else {
            this.$message.error('数据获取失败!')
          }
          this.loading = false
        })
      },
      getParams() {
        GoodsParams().then((res) => {
          if (res.code == 0) {
            this.categoryList = res.data.categoryList
          } else {
            this.$message.error('初始化参数失败!')
          }
        })
      },
      setStstus(id, status) {
          let msg = '确定通过吗？'
          if (status == 2) {
              msg = '确定不通过吗？'
          }
          this.$confirm(msg, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          }).then(() => {
            GoodsStatus({id: id, status: status}).then((res) => {
              if (res.code == 0) {
                  this.refreshPage()
                  this.$message.success(res.msg);
                } else {
                  this.$message.error(res.msg);
                }
            })
          }).catch(() => {
            // 取消操作
          });
      },
      setRec(id, is_rec) {
          let msg = '确定要推荐吗？'
          if (is_rec == 0) {
              msg = '确定要取消推荐吗？'
          }
          this.$confirm(msg, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          }).then(() => {
            GoodsRec({id: id, is_rec: is_rec}).then((res) => {
              if (res.code == 0) {
                  this.refreshPage()
                  this.$message.success(res.msg);
                } else {
                  this.$message.error(res.msg);
                }
            })
          }).catch(() => {
            // 取消操作
          });
      },
      del(id) {
        GoodsDel({id: id}).then((res) => {
      	  if (res.code == 0) {
            this.refreshPage()
              this.$message.success(res.msg);
            } else {
              this.$message.error(res.msg);
            }
        })
      },
      editTmp(row) {
        if (row) {
          this.$refs.refGoodsForm.editTmp(row)
        } else {
          this.$refs.refGoodsForm.dialogFormVisible = true
        }
      },
      search() {
        this.data.page = 1
        this.current_page = 1
        this.getList()
      },
      searchReset() {
        this.data = {
          page: 1,
          page_size: this.data.page_size
        }
      },
    }
  }
</script>

<style>
</style>
